<template>
  <div class="je-admin-sider-menu-item-content">
    <!-- 内容 -->
    <span class="content">{{ menu.text }}</span>
    <!-- 角标 -->
    <div v-if="menu.badge > 0" class="badge">{{ menu.badge > 100 ? '99+' : menu.badge }}</div>
    <!-- 锁 -->
    <i v-if="menu.lock" class="lock fal fa-lock-alt"></i>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'AdminSiderMenuItemContent',
    props: {
      menu: Object,
    },
  });
</script>
<style lang="less">
  .je-admin-sider-menu-item-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    overflow: hidden;
    .content {
      flex: auto;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .badge {
      flex: none;
      color: @badge-text-color;
      background: @badge-color;
      line-height: 12px;
      font-size: 12px;
      padding: 1px 4px;
      border-radius: 4px;
    }
    .lock {
      font-size: 12px;
      margin-left: 5px;
    }
  }
</style>
